<template>
  <a-modal :visible="visible" :title="title" @ok="onOk" @cancel="onCancel">
    <a-form>
      <a-form-item
        label="编号"
        :label-col="{ span: 4 }"
        v-if="id !== 0 && id !== -1"
      >
        <a-input readonly :value="id"></a-input>
      </a-form-item>
      <a-form-item
        label="知识源"
        :label-col="{ span: 4 }"
        v-bind="validateInfos.source"
      >
        <a-input :readonly="boolReadOnly" v-model:value="dto.source"></a-input>
      </a-form-item>

      <a-form-item
        label="创建人"
        :label-col="{ span: 4 }"
        v-bind="validateInfos.creator"
      >
        <a-input :readonly="boolReadOnly" v-model:value="dto.creator"></a-input>
        <!-- <a-input-number v-model:value="dto.creator"></a-input-number> -->
      </a-form-item>
      <a-form-item
        label="知识内容"
        :label-col="{ span: 4 }"
        v-bind="validateInfos.content"
      >
        <a-textarea
          :readonly="boolReadOnly"
          v-model:value="dto.content"
          placeholder="请输入知识内容"
          :auto-size="{ minRows: 2, maxRows: 6 }"
        />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- {{ props.dto }}, {{ props.id }}, {{dto}}, {{ dto.content }} -->
</template>
<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { useRequest } from "vue-request";
import { Form, message } from "ant-design-vue";
const boolReadOnly = ref(false);
const saveDto = reactive({});
// 定义属性
const props = defineProps({
  id: [Number, String],
  dto: Object,
  visible: Boolean,
});

// const title = computed(() => (props.id === 0 ? "新增知识" : "修改知识"));
const title = computed(() => {
  if (props.id === -1) {
    boolReadOnly.value = true;
    return "知识详情";
  } else if (props.id === 0) {
    boolReadOnly.value = false;
    return "新增知识";
  } else {
    boolReadOnly.value = false;
    return "修改知识";
  }
});
// 定义事件
const emit = defineEmits(["update:visible", "saved", "insertFinish"]);

async function onOk() {
  try {
    // 提交前校验
    await validate();
    if (props.id === 0) {
      // await insert(props.dto) // 触发入库
      Object.assign(saveDto, props.dto);
      emit("insertFinish", saveDto);
      console.log("insert");
    } else if (props.id === -1) {
      console.log(boolReadOnly.value);
    } else {
      // await update(props.dto) // 触发修改
      Object.assign(saveDto, props.dto);
      emit("saved", saveDto);
      console.log("update");
    }

    // 发送事件给父组件, 希望把 visible 改为 false
    emit("update:visible", false);
  } catch (e) {
    console.error(e);
  }
}

function onCancel() {
  // 发送事件给父组件, 希望把 visible 改为 false
  emit("update:visible", false);
}

const rules = ref({
  source: [
    { required: true, message: "知识源必须" },
    { min: 2, message: "字符数至少为2" },
  ],
  creator: [
    { required: true, message: "创建人必须" },
    { min: 2, message: "字符数至少为2" },
    //   {max:20, message:'至多为20', type:'number'}
  ],

  content: [{ required: true, message: "知识内容必须" }],
});

// 参数1: 待校验的数据
// 参数2: 校验规则
const { validateInfos, validate } = Form.useForm(props.dto, rules);
</script>
